import React, { Component } from 'react';

import Header from '../../components/header/yang/Header'
import Send from '../ui/Send'

import io from 'socket.io-client'

import {
  StyledWind
} from '../StyledChat'


let socket = null
const roomUrl = 'http://101.201.127.111:80/chat-room'
export default class WinDow extends Component {
  static defaultProps = {
    userInfo: { id: '', name: '', avatar: '' }
   }

  state = { 
    messageList:[]
   }

 async componentDidMount(){
    socket = io.connect(roomUrl)
    console.log("dsa");
    console.log(this.state.messageList)

    await socket.on('server-message',(data)=> {
    console.log('客户端接收服务器发送的消息', data)
    let list = this.state.messageList
    list.push(data)
    this.setState({ ...this.state, messageList: list })
    console.log(this.state.messageList) 
    })
  }
  //发送消息
  onSendMessage = message => {
    return(()=>{
      console.log(message);
      const date = new Date().getTime()
      const id = "asd" + date
      socket.emit('client-message', {
          userInfo: "孙婷",
          id,
          date,
          message
      })
    })

}
  render() {
    return (
      <StyledWind>
      <div style={{height:"100%"}}>
        <Header title='吃饭睡觉打宇杰' ></Header>
        <Send onSend={this.onSendMessage} messageList={this.state.messageList}></Send>
      </div>
      </StyledWind>
    );
  }
}
